<template>
  <div class="common-list comp-articles" v-loading.fullscreen="loading">
    <div class="common-list__head">
      <el-input class="filter" v-model="filters.title" size="small" style="width: 320px" clearable placeholder="请输入"
                :readonly="loading" @change="search(true)">
        <span slot="prepend">信息标题</span>
      </el-input>
      <!--            <el-input class="filter" v-model="filters.referer" size="small" style="width: 240px" clearable placeholder="请输入" :readonly="loading" @change="search(true)" v-if="type !== 'inspect'">-->
      <!--                <span slot="prepend">信息来源</span>-->
      <!--            </el-input>-->
      <!--            <el-input class="filter" v-model="filters.author" size="small" style="width: 240px" clearable placeholder="请输入" :readonly="loading" @change="search(true)" v-if="type !== 'inspect'">-->
      <!--                <span slot="prepend">信息作者</span>-->
      <!--            </el-input>-->
      <!--            <el-select class="filter" v-model="filters.tagId" size="small" style="width: 180px" @change="search(true)" v-if="!tagId">-->
      <!--                <el-option label="不限信息分类" :value="null"></el-option>-->
      <!--                <el-option v-for="data in tags" :key="data.id" :label="data.name" :value="data.id"></el-option>-->
      <!--            </el-select>-->
      <!--            <el-select class="filter" v-model="filters.published" size="small" style="width: 140px" @change="search(true)">-->
      <!--                <el-option label="不限信息状态" :value="null"></el-option>-->
      <!--                <el-option v-for="data in env.articlePublisheds" :key="data.id" :label="data.name" :value="data.value"></el-option>-->
      <!--            </el-select>-->
      <!--            <el-date-picker-->
      <!--              size="small"-->
      <!--              v-model="filters.publishTime"-->
      <!--              type="date"-->
      <!--              value-format="yyyy-MM-dd"-->
      <!--              placeholder="实际活动日期">-->
      <!--            </el-date-picker>-->
      <!--            <el-checkbox v-model="filters.isTop"-->
      <!--                         size="small"-->
      <!--                         :readonly="loading"-->
      <!--                         @change="search(true)"-->
      <!--                         border-->
      <!--                        true-label="1"-->
      <!--                        false-label="null">置顶</el-checkbox>-->
      <el-button class="filter" type="primary" size="small" @click="search()">查询</el-button>
      <el-button class="filter" type="plain" size="small" @click="reset(true)">重置</el-button>
    </div>
    <div class="common-list__nect">
      <slot name="head" :loading="loading" :filters="filters" :selects="selects"></slot>
    </div>
    <div class="common-list__body">
      <el-table ref="table" size="medium" height="100%" :data="list" @header-click="onTableHeaderClick"
                @row-click="onTableRowClick" @selection-change="onTableSelectionChange">
        <el-table-column type="selection" align="center" v-if="select"></el-table-column>
        <el-table-column label="政策标题" min-width="12">
          <template #default="scope">
            <span>{{ scope.row.policyTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column label="政策要点" min-width="12">
          <template #default="scope">
            <span>{{ scope.row.policyPoints }}</span>
          </template>
        </el-table-column>
        <el-table-column label="政策来源" min-width="12">
          <template #default="scope">
            <span>{{ scope.row.policySource }}</span>
          </template>
        </el-table-column>
        <!--                <el-table-column label="信息分类" min-width="4">-->
        <!--                    <template #default="scope">-->
        <!--                        <div v-for="tag in scope.row.tags" :key="tag.id">{{ tag.name }}</div>-->
        <!--                        <span v-if="scope.row.tags.length === 0">-</span>-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column label="信息来源" min-width="6" v-if="type !== 'inspect'">-->
        <!--                    <template #default="scope">{{ scope.row.referer || "-" }}</template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column label="信息作者" min-width="4" v-if="type !== 'inspect'">-->
        <!--                    <template #default="scope">{{ scope.row.author || "-" }}</template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column label="信息链接" min-width="6" v-if="type === 'inspect'">-->
        <!--                    <template #default="scope">-->
        <!--                        <a :href="scope.row.source" target="_blank" v-if="link && scope.row.source">{{ scope.row.source }}</a>-->
        <!--                        <span v-else>{{ scope.row.source }}</span>-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column label="申报起止日期" min-width="8" v-if="type === 'policy'">-->
        <!--                    <template #default="scope">{{ scope.row.startAt + " ~ " + scope.row.endAt }}</template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column label="信息权重" min-width="4">-->
        <!--                    <template #default="scope">{{ scope.row.weight }}</template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column label="浏览次数" min-width="4">-->
        <!--                    <template #default="scope">{{ scope.row.views }}</template>-->
        <!--                </el-table-column>-->
        <!--                <el-table-column label="信息状态" min-width="4">-->
        <!--                    <template #default="scope">-->
        <!--                        <span class="el-status&#45;&#45;success" v-if="scope.row.published === 'yes'"></span>-->
        <!--                        <span class="el-status&#45;&#45;warning" v-else-if="scope.row.published === 'approving'"></span>-->
        <!--                        <span class="el-status&#45;&#45;danger" v-else-if="scope.row.published === 'not'"></span>-->
        <!--                        <span>{{ scope.row.publishedText }}</span>-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <el-table-column label="发文时间" min-width="6">
          <template #default="scope">{{ scope.row.publishTimeStr }}</template>
        </el-table-column>
        <el-table-column label="操作" :width="160" v-if="$slots.body || $scopedSlots.body">
          <template #default="scope">
            <slot name="body" :loading="loading" :filters="filters" :data="scope.row" :selects="selects"></slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="common-list__foot" :class="{ 'common-list__foot--slot': $slots.foot || $scopedSlots.foot }">
      <el-pagination background layout="total,sizes,prev,pager,next,jumper" :page-sizes="[10, 20, 50, 100]"
                     :page-size="filters.linage" :current-page="filters.page" :total="filters.total"
                     @size-change="onTableLinageChange" @current-change="onTablePageChange"></el-pagination>
      <slot name="foot" :loading="loading" :filters="filters" :selects="selects"></slot>
    </div>
  </div>
</template>

<script>
import mixin from "../mixin";
import {object, array, string, int, session} from "../util";

export default {
  name: "comp-policys",
  mixins: [mixin],
  props: {
    type: {type: String, default: null},
    tagId: {type: String, default: null},
    select: {type: Boolean, default: false},
    link: {type: Boolean, default: false},
  },
  data: () => ({
    loading: false,
    filters: {
      ids: null,
      type: null,
      title: null,
      referer: null,
      author: null,
      tagId: null,
      published: null,
      linage: 10,
      page: 1,
      total: 0,
      startTime: null,
      isTop: null
    },
    list: [],
    selects: [],
    tags: [],
  }),
  methods: {
    reset(deep) {
      let data = deep ? {} : object(session([this.env.key, this.$options.name, "filters", this.$route.fullPath]));
      this.filters = Object.assign(this.$options.data().filters, data);
      if (this.$route.query?.startTime) {
        this.filters.startTime = this.$route.query.startTime
      }
      this.loading = false
      this.search(true);
    },
    validate() {
      let filters = this.filters;
      let tags = this.tags;
      filters.ids = null;
      filters.type = this.type;
      filters.tagId = this.tagId || string(() => tags.find((tag) => tag.id === filters.tagId).id) || null;
      filters.total = Math.max(int(filters.total), 0);
      filters.linage = Math.max(int(filters.linage), 1);
      filters.page = Math.max(Math.min(int(filters.page), Math.ceil(filters.total / filters.linage)), 1);
      session([this.env.key, this.$options.name, "filters", this.$route.fullPath], filters);
    },
    onTableHeaderClick() {
      this.select && this.$refs.table.toggleAllSelection();
    },
    onTableRowClick(row) {
      this.select && this.$refs.table.toggleRowSelection(row);
    },
    onTableLinageChange(value) {
      this.filters.linage = value;
      this.search(true);
    },
    onTablePageChange(value) {
      this.filters.page = value;
      this.search(true);
    },
    onTableSelectionChange(selects) {
      this.filters.ids = selects.map((data) => data.id);
      this.selects = selects;
    },
    chooseTag(action, tag) {
      if (this.loading) return;
      let filters = this.filters;
      if (!action || action === "start") {
        this.$refs.tagPicker.init();
        this.$nextTick(() => this.$refs.tagPickerList.init());
      } else if (action === "submit") {
        let index = this.tags.findIndex((target) => target.id === tag.id);
        if (index > -1) this.tags.splice(index, 1);
        filters.tagId = tag.id;
        this.tags.push({id: tag.id, name: tag.name});
        this.chooseTag("end");
        this.search(true);
      } else if (action === "end") {
        this.$refs.tagPicker.close();
      }
    },
    search(clean) {
      if (this.loading) return;
      if (clean) this.list = [];
      if (clean) this.selects = [];
      let filters = this.filters;
      this.validate();
      this.loading = true;
      this.plugins.user.policyGets(this.filters).then((res) => {
        this.loading = false;
        this.list = [];
        this.selects = [];
        this.$nextTick(() => this.$refs.table.doLayout());
        if (res.code === 0) {
          let data = res.data;
          if (data.page > 1 && data.list.length === 0) {
            filters.total = 0;
            this.search();
          } else {
            filters.total = data.total;
            this.list = data.list;
            this.validate();
          }
        } else {
          filters.total = 0;
          this.validate();
          this.plugins.modal.toast("列表加载失败<br>" + res.code + "：" + res.msg, "error");
        }
      });
    },
    init() {
      this.loading = true;
      this.reset();
    },
  },
};
</script>

<style lang="scss">
.comp-articles {
  overflow: hidden;
}
</style>
